<script>
	estado_transaccion='<?php echo $estado_transaccion?>';
	estado_correcto='Se ha registrado un nuevo plan exitosamente.';
	estado_incorrecto='Error al registrar un nuevo plan: No se pudo conectar al servidor. Por favor vuelva a intentarlo.';
</script>
<form name="form_social" method="post" action="<?php echo base_url()?>index.php/social/guardar_plan" enctype="multipart/form-data">
	<div id="wizard" class="swMain">
        <ul>
            <li>
                <a href="#step-1">
                    <span class="stepNumber">1<small>er</small></span>
                    <span class="stepDesc">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Paso<br/>
                        <small>&nbsp;Plan</small>
                    </span>
                </a>
            </li>
            <li>
                <a href="#step-3">
                    <span class="stepNumber">3<small>er</small></span>
                    <span class="stepDesc">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Paso<br/>
                        <small>&nbsp;Asignaciones</small>
                    </span>
                </a>
            </li>
        </ul>
        <div id="step-1">	
            <h2 class="StepTitle">Ingreso de la información del Plan</h2>
            <table>
            <tr>
            <td>
			<p>
                <label>Código del Plan: </label>
                <input type="text" name="numero" size="10" />
            </p>
            <p>
                <label class="label_textarea">Título del Proyecto: </label>
                <textarea name="titulo" style="resize:none; width:300px" rows="3"></textarea>
            </p>
            </td>
            <td rowspan="2" width="300px" align="right">
            <p>
            	<label class="label_textarea">Horarios: </label>
                <textarea name="horarios" style="resize:none;" rows="3"></textarea>
            </p>
            <p>
                <label>Presupuesto: </label>
                <?php
                	for($i=0;$i<4;$i++)
					{
						echo "&nbsp";
					}
				?>
                <input type="text" name="presupuesto" size="10" />
            </p>
            </td>
            </tr>
            <tr>
            <td>
            <p>
                <label>Período: 
                Desde: </label> <input type="text" name="inicioperiodo" id="inicioperiodo" />&nbsp;&nbsp;&nbsp;
                Hasta: <input type="text" name="finperiodo" id="finperiodo" />
            </p>
            <br />
            <p>
               <label style="width:150px">Fecha de Acuerdo de Aprobación del Plan: </label>
               <input type="text" name="fechaaprobacion" id="fechaaprobacion" />
            </p>
            </td>
           </tr>
          </table>
        </div>        
        <div id="step-3">	
            <h2 class="StepTitle">Información de Asignación de Tutor y Estudiantes al Proyecto</h2>
            <p>
            	<label>Tutor: </label>
            	<select name="id_tutor" class="select" style="width:350px">
					<?php
					foreach($datos as $d)
					{
						echo "<option value='".$d['id_tutor']."'>".ucwords($d['tutor']).", ".$d['departamento']."</option>";
					}
                    ?>
               </select>
            </p>
            <p>
            	<label style="width:350px">Presione click en la imagen para agregar un estudiante</label>
            	<a rel="leanModal" title="Ver Estudiantes" href="#ventana">
                <img src="<?php echo base_url(); ?>img/agregar.png" width="30px" />
                </a>
           	</p>
            <p>
                <table align="center" class="table_design" cellpadding="0" cellspacing="0">
                <thead>
                	<tr>
                    	<th>Carnet</th>
                        <th>Nombre Completo</th>
                    </tr>
                </thead>
                <tbody id="content-table">
                </tbody>
                </table>
            </p>
        </div>
        <div id="step-4">	
            <h2 class="StepTitle">Documentos</h2>
            <p>
            	<label>Seleccione los documentos a subir: </label>
                <input type="file" name="userfile" onchange="validate_fileupload(this.value)" />
            </p>
        </div>
    </div>
</form>
<div id="ventana" style="width:1080px; left:10% !important;">
    <div id='signup-header'>
        <h2>Listado de Estudiantes de Académica</h2>
        <a class="modal_close" id="cerrar"></a>
    </div>

    <form method="post" id="form_estudiantes" name="form_estudiantes" style="width:800px;">

    <table class="grid" align="center">
    <thead>
    <tr>
        <th>Carnet</th>
        <th>Nombre</th>
        <th>Carrera</th>
        <th>Porcentaje</th>
        <th>Seleccionar</th>
    </tr>
    </thead>
    <tbody>
        <?php
        foreach($estudiante_academica as $estudiante)
        {
            echo "<tr>";
            echo "<td>".$estudiante['carnet']."</td>";
            echo "<td>".ucwords($estudiante['estudiante'])."</td>";
            echo "<td>".ucwords($estudiante['carrera'])."</td>";
            echo "<td>".$estudiante['porcentaje']."</td>";
			echo "<td><input type='checkbox' name='alumno[]' value='".$estudiante['carnet']."'></td>";
			echo "<input type='hidden' name='nombre[]' value='".$estudiante['estudiante']."' >";
            echo "</tr>";
        }
        ?>
    </tbody>
    </table>
     <p style="text-align: center;">
        <button type="button" class="boton_validador" onclick="agregarEstudiantes()">Agregar</button>
    </p>
</form>
</div>
<script language="javascript">
$(document).ready(function(){
	
	$('#wizard').smartWizard();
	
	function startChange()
	{
		var startDate = start.value(),
		endDate = end.value();
	
		if (startDate) 
		{
			startDate = new Date(2014,07,01);
			startDate.setDate(startDate.getDate());
			end.min(startDate);
		}
		else if (endDate)
		{
			start.max(new Date(endDate));
		}
		else
		{
			endDate = new Date();
			start.max(endDate);
			end.min(endDate);
		}
	}
	
	function endChange()
	{
		var endDate = end.value(),
		startDate = start.value();
	
		if (endDate)
		{
			endDate = new Date(endDate);
			endDate.setDate(endDate.getDate());
			start.max(endDate);
		}
		else if (startDate)
		{
			end.min(new Date(startDate));
		}
		else
		{
			endDate = new Date();
			start.max(endDate);
			end.min(endDate);
		}
	}
	
	var start = $("#inicioperiodo").kendoDatePicker({
		change: startChange,
		format: "dd-MM-yyyy" 
	}).data("kendoDatePicker");

	var end = $("#finperiodo").kendoDatePicker({
		change: endChange,
		format: "dd-MM-yyyy" 
	}).data("kendoDatePicker");

	start.max(end.value());
	end.min(start.value());
	
	var fecha_acuerdo=$("#fechaaprobacion").kendoDatePicker({
		culture: "es-SV",
		format: "dd-MM-yyyy"
	}).data("kendoDatePicker");
});

function municipios(depto)
{
		$.ajax({
			async:	true, 
			url:	"<?php echo base_url()?>/index.php/social/municipios/"+depto,
			dataType:"html",
			success: function(data) {
				console.log(data);
				$('#municipio').html(data);
				$('#municipio').kendoComboBox({
					autoBind: false,
					filter: 'contains'
				});
			},
			error:function(data) {
				 alertify.alert('Error al cargar los municipios');
			}
		});	
}


function agregarEstudiantes()
{
	chk=document.getElementsByName('alumno[]');
	nombre=document.getElementsByName('nombre[]');
	var cont='';
	for(i=0;i<chk.length;i++)
	if(chk[i].checked)
	{
		cont=cont+'<tr>';
		cont=cont+'<td>'+chk[i].value+'</td>';
		cont=cont+'<td>'+nombre[i].value.capitalize()+'</td>';
		cont=cont+'</tr>';
		cont=cont+'<input type="hidden" name="carnet[]" value="'+chk[i].value+'" >';
	}
	$('#content-table').html(cont);
	$('#cerrar').click();
}


function validate_fileupload(fileName)
{
    var allowed_extensions = new Array("doc","docx","pdf","xps");
    var file_extension = fileName.split('.').pop(); // split function will split the filename by dot(.), and pop function will pop the last element from the array which will give you the extension as well. If there will be no extension then it will return the filename.
    var tipoArchivo= false;
    for(var i = 0; i <= allowed_extensions.length; i++)
    {
        if(allowed_extensions[i]==file_extension)
        {
     		tipoArchivo=true;
            return true; // valid file extension
            
        }
    }
    alert("Seleccione un archivo valido, de formato: .doc | .docx | .pdf | .xps");
	tipoArchivo=false;
    return false;
}

</script>